import React from 'react';
import { Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './Breadcrumb.css';

interface BreadcrumbProps {
  /** 面包屑文本内容 */
  text: string;
  /** 是否显示返回按钮，默认为true */
  showBackButton?: boolean;
  /** 返回按钮点击时的回调函数，如果不提供则使用默认的返回上一页逻辑 */
  onBack?: () => void;
  /** 返回按钮的文本，默认为"返回" */
  backText?: string;
  /** 自定义样式类名 */
  className?: string;
  /** 是否显示在右侧的操作按钮区域 */
  rightContent?: React.ReactNode;
  /** 自定义样式对象 */
  style?: React.CSSProperties;
}

const Breadcrumb: React.FC<BreadcrumbProps> = ({
  text,
  showBackButton = true,
  onBack,
  backText = '返回',
  className = '',
  rightContent,
  style
}) => {
  const navigate = useNavigate();

  // 默认返回逻辑：返回上一页，如果没有历史记录则返回首页
  const handleBack = () => {
    if (onBack) {
      onBack();
    } else {
      if (window.history.length > 1) {
        navigate(-1);
      } else {
        navigate('/');
      }
    }
  };

  return (
    <div className={`breadcrumb ${className}`} style={style}>
      <div className="breadcrumb-content">
        <div className="breadcrumb-left">
          {showBackButton && (
            <Button
              type="text"
              icon={<ArrowLeftOutlined />}
              onClick={handleBack}
              className="breadcrumb-back-btn"
              title={backText}
            >
              {backText}
            </Button>
          )}
          <span className="breadcrumb-text">{text}</span>
        </div>
        {rightContent && (
          <div className="breadcrumb-right">
            {rightContent}
          </div>
        )}
      </div>
    </div>
  );
};

export default Breadcrumb;
